<template>
  <div class="login-container">
    <div class="left-box">
      <img class="img" :src="list[0].img" />
    </div>
    <div class="right-box">
      <span class="icp">国ICP备2024000601号-2全能狮</span>
      <div class="square-box"></div>
      <div class="title">您好，欢迎登录！</div>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="loginForm" auto-complete="on">
        <el-form-item prop="username">
          <el-input clearable maxlength="11" class="el-input" ref="username" v-model="loginForm.username"
            placeholder="用户账号（手机号）" name="username" tabindex="1" auto-complete="on"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input clearable class="el-input" ref="password" v-model="loginForm.password" show-password
            placeholder="用户密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin">
          </el-input>
        </el-form-item>

        <el-form-item prop="verification">
          <el-input type="number" oninput="if(value.length>6)value=value.slice(0,6)"
            onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
            onfocus="this.removeAttribute('readonly');" auto-complete="off" class="el-input" ref="verification"
            v-model="loginForm.verification" placeholder="短信验证码" name="verification" tabindex="2" clearable
            @keyup.enter.native="handleLogin">
            <el-button class="btn" slot="append" :style="disGetCode ? 'opacity: .6;' : ''" @click="getCode"
              :disabled="disGetCode">{{ time == 60 ? getCodeName : time + "S" }}</el-button>
          </el-input>
        </el-form-item>

        <el-button :loading="loading" type="primary" style="width: 330px; height: 45px"
          @click.native.prevent="handleLogin">登录
        </el-button>

        <div class="tips" :style="'margin-top:20px;'">
          <span>忘记密码?</span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Swiper from "swiper";
  import adminApi from '@/api/adminApi'
  import "swiper/dist/css/swiper.min.css";

  export default {
    name: "Login",
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入正确手机号"));
        } else {
          callback();
        }
      };
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error("请输入正确用户密码"));
        } else {
          callback();
        }
      };
      const verification = (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入验证码"));
        } else {
          callback();
        }
      };
      return {
        time: 60,
        getCodeName: "验证码",
        disGetCode: false,
        list: [{
            img: require("@/assets/icon/login-bg.png"),
            title: "",
          },
          // {
          //   img: 'https://gd-filems-fat.my-static.dancf.com/saas/f2619w/eeb4120e-fb6e-4f89-90fc-a0872154ac3f905.png',
          //   title: '提升市场转化效率',
          //   detail: '高效品牌管理，一键调用品牌LOGO/颜色/字体，节日推广/实时热点跟进快人一步，为市场运营人员充分赋能'
          // }
        ],
        loginForm: {
          username: "18850059210",
          password: "Pcx123999",
          verification: "888888",
        },
        loginRules: {
          username: [{
            required: true,
            trigger: "blur",
            validator: validateUsername
          }, ],
          password: [{
            required: true,
            trigger: "blur",
            validator: validatePassword
          }, ],
          verification: [{
            required: true,
            trigger: "blur",
            validator: verification
          }, ],
        },
        loading: false,
        passwordType: "password",
        redirect: undefined,
      };
    },
    mounted() {},
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true,
      },
    },
    methods: {
      // 获取验证码
      getCode() {
        if (
          !this.loginForm.username ||
          !/^1[3456789]\d{9}$/.test(this.loginForm.username)
        ) {
          this.$message({
            type: "warning",
            message: "请输入正确手机号",
          });
          return;
        }
        this.disGetCode = true;
        this.sendSms(this.loginForm.username);
      },
      sendSms(phone) {
        adminApi.sendCode({
            phone
          })
          .then((res) => {
            console.log(res, "获取验证码");
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "发送成功!",
              });
              let setInter = setInterval(() => {
                if (this.time == 1) {
                  clearInterval(setInter);
                  this.time = 60;
                  this.getCodeName = "重新获取";
                  this.disGetCode = false;
                } else {
                  this.time = this.time - 1;
                }
              }, 1000);
            } else {
              this.disGetCode = false;
              this.$message({
                type: "warning",
                message: res.message,
              });
            }
          })
          .catch((err) => {
            this.disGetCode = false;
            this.$message({
              type: "warning",
              message: err.message,
            });
          });
      },
      showPwd() {
        if (this.passwordType === "password") {
          this.passwordType = "";
        } else {
          this.passwordType = "password";
        }
        this.$nextTick(() => {
          this.$refs.password.focus();
        });
      },
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            this.$store
              .dispatch("user/login", this.loginForm)
              .then(() => {
                this.$router.push({
                  path: this.redirect || "./"
                });
                this.loading = false;
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    },
  };

</script>

<style lang="scss" src="./index.scss" scoped></style>
